<template>
  <div class="box detailBox" @scroll="onScroll" ref="detailBox">
    <van-nav-bar left-arrow class="detail-nav-bar1" @click-left="onClickLeft">
      <template #right>
        <van-popover
          v-model="showPopover"
          trigger="click"
          :actions="actions"
          @select="onSelect"
          placement="bottom-end"
        >
          <template #reference>
            <van-icon name="ellipsis" size="18" />
          </template>
        </van-popover>
      </template>
    </van-nav-bar>
    <van-nav-bar left-arrow class="detail-nav-bar2" @click-left="onClickLeft">
      <template #right>
        <van-popover
          v-model="showPopover"
          trigger="click"
          :actions="actions"
          @select="onSelect"
          placement="bottom-end"
        >
          <template #reference>
            <van-icon name="ellipsis" size="18" />
          </template>
        </van-popover>
      </template>
      <template #title>
        <van-tabbar v-model="active" @change="onChangeFloor">
          <van-tabbar-item icon="home-o">详情</van-tabbar-item>
          <van-tabbar-item icon="search" >评价</van-tabbar-item>
          <van-tabbar-item icon="friends-o" >推荐</van-tabbar-item>
        </van-tabbar>
      </template>
    </van-nav-bar>
    <van-swipe class="my-swipe" indicator-color="white" :initial-swipe="index" @change="onChange" ref="mySwipe">
      <van-swipe-item v-for="item in imgList" :key="item" @click="onImgPreView">
        <van-image
          width="100vw"
          height="3rem"
          fit="contain"
          :src="item"
        />
      </van-swipe-item>
    </van-swipe>
    <h1>商品名称：{{data.proName}}</h1>
    <p>原价：<del>{{data.price}}</del></p>
    <p>折扣：{{data.discount}}</p>
    <p>现价：<span>{{data.price*data.discount/10}}</span></p>
    <p>销量：{{data.sales}}</p>
    <p>库存：{{data.stock}}</p>
    <p>评分：{{data.tip}}</p>
    <p>分类：{{data.kind}}</p>
    <div class="product-info">
      <h1 ref="tip">商品评价</h1>
      <div class="detail-comment-item">
        <div class="detail-comment-item-user">
          <div class="detail-comment-item-avatar">
            <img src="https://img02.hua.com/pc/assets/img/avatar_default_09.jpg" alt="Anlun*eung">
            <span>Anlun*eung</span>
          </div>
        </div>
        <div class="detail-comment-item-main tm-m-photos">
          <div class="star stars5">
            <ul class="star-list">
              <li class="star-item"></li>
              <li class="star-item"></li>
              <li class="star-item"></li>
              <li class="star-item"></li>
              <li class="star-item"></li>
            </ul>
          </div>
          <div class="detail-comment-item-content">
            <p>昨晚差不多12點才下單，一直擔心今天趕不上，結果一大早就收到!好美，她很喜歡，謝謝!</p>
          </div>
          <ul class="detail-comment-item-imglist tm-m-photos-thumb clearfix">
            <li class="detail-comment-item-img" data-src="//img.hua.com/reviewpic/app/2019/12/24/acfc6c1154594f7d90762dd337f4099d.jpeg">
              <img src="//img.hua.com/reviewpic/app/2019/12/24/acfc6c1154594f7d90762dd337f4099d.jpeg" alt="" width="78" height="78">
            </li>
            <li class="detail-comment-item-img" data-src="//img.hua.com/reviewpic/app/2019/12/24/bcaec5e3068545cf91942fea89ae16f2.jpeg">
              <img src="//img.hua.com/reviewpic/app/2019/12/24/bcaec5e3068545cf91942fea89ae16f2.jpeg" alt="" width="78" height="78">
            </li>
          </ul>
          <div class="detail-comment-item-imgviewer tm-m-photo-viewer">
            <a class="tm-m-photo-viewer-navleft" href="javascript:;"><span class="icon icon-imgviewer-left"></span></a>
            <a class="tm-m-photo-viewer-navright" href="javascript:;"><span class="icon icon-imgviewer-right"></span></a>
          </div>
        </div>
      </div>
      <div class="detail-comment-item">
        <div class="detail-comment-item-user">
          <div class="detail-comment-item-avatar">
            <img src="https://img02.hua.com/pc/assets/img/avatar_default_04.jpg" alt="吕*师">
            <span>吕*师</span>
          </div>
        </div>
        <div class="detail-comment-item-main tm-m-photos">
          <div class="star stars5">
            <ul class="star-list">
              <li class="star-item"></li>
              <li class="star-item"></li>
              <li class="star-item"></li>
              <li class="star-item"></li>
              <li class="star-item"></li>
            </ul>
          </div>
          <div class="detail-comment-item-content">
            <p>实物比图片更好看，配色和包装都非常的清新，一点也不俗气，很喜欢啊！下次还选这家</p>
          </div>
          <ul class="detail-comment-item-imglist tm-m-photos-thumb clearfix">
            <li class="detail-comment-item-img" data-src="//img.hua.com/reviewpic/m/2019/12/12/cf68cc3cae9b4f62bcbc579eeb388cd2.jpeg">
                <img src="//img.hua.com/reviewpic/m/2019/12/12/cf68cc3cae9b4f62bcbc579eeb388cd2.jpeg" alt="" width="78" height="78">
            </li>
          </ul>
          <div class="detail-comment-item-imgviewer tm-m-photo-viewer">
            <a class="tm-m-photo-viewer-navleft" href="javascript:;"><span class="icon icon-imgviewer-left"></span></a>
            <a class="tm-m-photo-viewer-navright" href="javascript:;"><span class="icon icon-imgviewer-right"></span></a>
          </div>
          <div class="detail-comment-item-btm">
            <span class="detail-comment-item-addr">广东深圳市南山区</span>
            <span class="detail-comment-item-time">2019-12-12</span>
          </div>
        </div>
      </div>
      <ul class="evaluation">
        <li class="evaluation-item">
          <div class="evaluation-item-hd">
            <div class="evaluation-item-user">
              <span class="evaluation-item-user__pic"><img src="https://img02.hua.com/pc/assets/img/avatar_default_09.jpg"></span>
              <strong class="evaluation-item-user__name">江*晨</strong>
            </div>
            <div class="evaluation-item-star">
              <span class="evaluation-item-star-box star5"></span>
            </div>
          </div>
          <div class="evaluation-item-bd">
            <p class="evaluation-item-desc">非常满意，包装精美，送达及时，会回购。</p>
            <div class="evaluation-item-imglist">
              <a href="/productpj/PictureDetail?vorId=320204&amp;init=1">
                <img data-original="//img.hua.com/reviewpic/app/2019/07/10/605287e96f404a42a4fa63dae6609066.jpeg" src="//img.hua.com/reviewpic/app/2019/07/10/605287e96f404a42a4fa63dae6609066.jpeg">
              </a>
            </div>
            <div class="evaluation-item-info">
              <p class="evaluation-item-info__ads"><i class="icon icon-location"></i>北京丰台区</p>
              <p class="evaluation-item-info__time">2019-07-10</p>
            </div>
          </div>
        </li>
        <li class="evaluation-item">
          <div class="evaluation-item-hd">
            <div class="evaluation-item-user">
              <span class="evaluation-item-user__pic"><img src="https://thirdwx.qlogo.cn/mmopen/vi_32/GU7aKq6AZJnBX2XNIgKcbm1rQbhdNGkdrLzgx9onCrYK5ib9DNg85OYar69ldHPDTOvMQtBFyhUGJEKVsN4z13Q/132"></span>
              <strong class="evaluation-item-user__name">王*</strong>
            </div>
            <div class="evaluation-item-star">
              <span class="evaluation-item-star-box star5"></span>
            </div>
          </div>
          <div class="evaluation-item-bd">
            <p class="evaluation-item-desc">花超级新鲜，老婆很高兴，品质一流。</p>
            <div class="evaluation-item-imglist">
              <a href="/productpj/PictureDetail?vorId=317750&amp;init=1">
                <img data-original="//img.hua.com/reviewpic/app/2019/06/18/9b0f9bbc77d14b52a7b5295bed2dae66.png" src="//img.hua.com/reviewpic/app/2019/06/18/9b0f9bbc77d14b52a7b5295bed2dae66.png">
              </a>
              <a href="/productpj/PictureDetail?vorId=317750&amp;init=2">
                <img data-original="//img.hua.com/reviewpic/app/2019/06/18/3eb2b97cfa0345a890140e7458a2afb7.png" src="//img.hua.com/reviewpic/app/2019/06/18/3eb2b97cfa0345a890140e7458a2afb7.png">
              </a>
            </div>
            <div class="evaluation-item-info">
              <p class="evaluation-item-info__ads"><i class="icon icon-location"></i>重庆九龙坡区</p>
              <p class="evaluation-item-info__time">2019-06-18</p>
            </div>
          </div>
        </li>
        <li class="evaluation-item">
          <div class="evaluation-item-hd">
            <div class="evaluation-item-user">
              <span class="evaluation-item-user__pic"><img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJYGOPBpL8Udb6GWc2ZHoF3gSCfFG9hAJrJmcZlBzyG5ogjUiaowudfawo8DP1CZoicBQTibrdw6uENg/132"></span>
              <strong class="evaluation-item-user__name">wang*ujia</strong>
            </div>
            <div class="evaluation-item-star">
              <span class="evaluation-item-star-box star5"></span>
            </div>
          </div>
          <div class="evaluation-item-bd">
            <p class="evaluation-item-desc">非常满意，鲜花新鲜，派送很快，给媳妇儿一个小惊喜</p>
            <div class="evaluation-item-imglist">
              <a href="/productpj/PictureDetail?vorId=299427&amp;init=1">
                <img data-original="//img.hua.com/reviewpic/app/2019/03/29/48b2ff0f2adc4536af531eb0100ee1fb.jpg" src="//img.hua.com/reviewpic/app/2019/03/29/48b2ff0f2adc4536af531eb0100ee1fb.jpg">
              </a>
            </div>
            <div class="evaluation-item-info">
              <p class="evaluation-item-info__ads"><i class="icon icon-location"></i>北京海淀区</p>
              <p class="evaluation-item-info__time">2019-03-29</p>
            </div>
          </div>
        </li>
        <li class="evaluation-item">
          <div class="evaluation-item-hd">
            <div class="evaluation-item-user">
              <span class="evaluation-item-user__pic"><img src="https://img02.hua.com/pc/assets/img/avatar_default_06.jpg"></span>
              <strong class="evaluation-item-user__name">zo*yi</strong>
            </div>
            <div class="evaluation-item-star">
              <span class="evaluation-item-star-box star5"></span>
            </div>
          </div>
          <div class="evaluation-item-bd">
            <p class="evaluation-item-desc">送花很及时，好看  喜欢，和图上一样。。。</p>
            <div class="evaluation-item-imglist">
              <a href="/productpj/PictureDetail?vorId=296394&amp;init=1">
                <img data-original="//img.hua.com/reviewpic/app/2019/03/09/2fc11fbbc8924d12b6a61198dd5f1a83.jpeg" src="//img.hua.com/reviewpic/app/2019/03/09/2fc11fbbc8924d12b6a61198dd5f1a83.jpeg">
              </a>
            </div>
            <div class="evaluation-item-info">
              <p class="evaluation-item-info__ads"><i class="icon icon-location"></i>河南信阳市光山县</p>
              <p class="evaluation-item-info__time">2019-03-09</p>
            </div>
          </div>
        </li>
        <li class="evaluation-item">
          <div class="evaluation-item-hd">
            <div class="evaluation-item-user">
              <span class="evaluation-item-user__pic"><img src="https://thirdwx.qlogo.cn/mmopen/vi_32/XbfiaheKnfK7CFcia2nXkUJRTVfMobpiaNmibtagsNbp8ESVXLq9fJjc0LpPDDyEFqaOaic105D43Adw3GZK3ysjHQA/132"></span>
              <strong class="evaluation-item-user__name">光阴虚掷* 思红袖</strong>
            </div>
            <div class="evaluation-item-star">
              <span class="evaluation-item-star-box star5"></span>
            </div>
          </div>
          <div class="evaluation-item-bd">
            <p class="evaluation-item-desc">特别棒，配送时间刚刚好。鲜花跟图片一模一样，特别美。总之吧，女神很开心</p>
            <div class="evaluation-item-imglist">
              <a href="/productpj/PictureDetail?vorId=291927&amp;init=1">
                <img data-original="//img.hua.com/reviewpic/app/2019/02/19/8e5a5cda88ba4406808bee24598366e8.png" src="//img.hua.com/reviewpic/app/2019/02/19/8e5a5cda88ba4406808bee24598366e8.png">
              </a>
              <a href="/productpj/PictureDetail?vorId=291927&amp;init=2">
                <img data-original="//img.hua.com/reviewpic/app/2019/02/19/f7e0da335232489b93d06636c50db34e.png" src="//img.hua.com/reviewpic/app/2019/02/19/f7e0da335232489b93d06636c50db34e.png">
              </a>
            </div>
            <div class="evaluation-item-info">
              <p class="evaluation-item-info__ads"><i class="icon icon-location"></i>黑龙江绥化市望奎县</p>
              <p class="evaluation-item-info__time">2019-02-19</p>
            </div>
          </div>
        </li>
        <li class="evaluation-item">
          <div class="evaluation-item-hd">
            <div class="evaluation-item-star">
              <span class="evaluation-item-star-box star5"></span>
            </div>
          </div>
          <div class="evaluation-item-bd">
            <p class="evaluation-item-desc">第一次来，总体上不错。会再来。</p>
            <div class="evaluation-item-imglist">
              <a href="/productpj/PictureDetail?vorId=290790&amp;init=1">
                <img data-original="//img.hua.com/reviewpic/app/2019/02/15/efb2b1bd35ad4aa8bbec8c6f2073ad55.png" src="//img.hua.com/reviewpic/app/2019/02/15/efb2b1bd35ad4aa8bbec8c6f2073ad55.png">
              </a>
              <a href="/productpj/PictureDetail?vorId=290790&amp;init=2">
                <img data-original="//img.hua.com/reviewpic/app/2019/02/15/99af048f87db4befbd319ef41bc370b3.png" src="//img.hua.com/reviewpic/app/2019/02/15/99af048f87db4befbd319ef41bc370b3.png">
              </a>
            </div>
            <div class="evaluation-item-info">
              <p class="evaluation-item-info__ads"><i class="icon icon-location"></i>广西北海市海城区</p>
              <p class="evaluation-item-info__time">2019-02-15</p>
            </div>
          </div>
        </li>
        <li class="evaluation-item">
          <div class="evaluation-item-hd">
            <div class="evaluation-item-user">
              <span class="evaluation-item-user__pic"><img src="https://img02.hua.com/pc/assets/img/avatar_default_05.jpg"></span>
              <strong class="evaluation-item-user__name">杨*</strong>
            </div>
            <div class="evaluation-item-star">
              <span class="evaluation-item-star-box star5"></span>
            </div>
          </div>
          <div class="evaluation-item-bd">
            <p class="evaluation-item-desc">时间很及时，非常满意</p>
            <div class="evaluation-item-imglist">
              <a href="/productpj/PictureDetail?vorId=289244&amp;init=1">
                <img data-original="//img.hua.com/reviewpic/app/2019/02/14/e9abc22bc36f43609db27e540040531f.jpg" src="//img.hua.com/reviewpic/app/2019/02/14/e9abc22bc36f43609db27e540040531f.jpg">
              </a>
            </div>
            <div class="evaluation-item-info">
              <p class="evaluation-item-info__ads"><i class="icon icon-location"></i>云南昆明市安宁市</p>
              <p class="evaluation-item-info__time">2019-02-14</p>
            </div>
          </div>
        </li>
        <li class="evaluation-item">
          <div class="evaluation-item-hd">
            <div class="evaluation-item-user">
              <span class="evaluation-item-user__pic"><img src="https://img02.hua.com/pc/assets/img/avatar_default_08.jpg"></span>
              <strong class="evaluation-item-user__name">Aro*He</strong>
            </div>
            <div class="evaluation-item-star">
              <span class="evaluation-item-star-box star5"></span>
            </div>
          </div>
          <div class="evaluation-item-bd">
            <p class="evaluation-item-desc">花很好看 和图片没什么差别 送达也及时 妈妈喜欢</p>
            <div class="evaluation-item-imglist">
              <a href="/productpj/PictureDetail?vorId=284680&amp;init=1">
                <img data-original="//img.hua.com/reviewpic/app/2019/01/15/cf50ba43ac684a5680165c1b57dd6c78.png" src="//img.hua.com/reviewpic/app/2019/01/15/cf50ba43ac684a5680165c1b57dd6c78.png">
              </a>
            </div>
            <div class="evaluation-item-info">
              <p class="evaluation-item-info__ads"><i class="icon icon-location"></i>北京朝阳区</p>
              <p class="evaluation-item-info__time">2019-01-15</p>
            </div>
          </div>
        </li>
        <li class="evaluation-item">
          <div class="evaluation-item-hd">
            <div class="evaluation-item-user">
              <span class="evaluation-item-user__pic"><img src="https://thirdwx.qlogo.cn/mmopen/vi_32/Vk0HnRNNGqKwNe5zZbUnQJXKOB8SBpw4v5OfuFYaiaTm7ibyRvFIEVcwOpbAg120FzUcqJt8pkJqicnmcPA19FuVg/132"></span>
              <strong class="evaluation-item-user__name">L*l</strong>
            </div>
            <div class="evaluation-item-star">
              <span class="evaluation-item-star-box star5"></span>
            </div>
          </div>
          <div class="evaluation-item-bd">
            <p class="evaluation-item-desc">还好啦，客服很有耐心哟，我女朋友很喜欢呀</p>
            <div class="evaluation-item-imglist">
              <a href="/productpj/PictureDetail?vorId=284170&amp;init=1">
                <img data-original="//img.hua.com/reviewpic/app/2019/01/10/d310cce989b947d0809d222e4049e995.jpeg" src="//img.hua.com/reviewpic/app/2019/01/10/d310cce989b947d0809d222e4049e995.jpeg">
              </a>
            </div><div class="evaluation-item-info">
              <p class="evaluation-item-info__ads"><i class="icon icon-location"></i>河南平顶山市新华区</p>
              <p class="evaluation-item-info__time">2019-01-10</p>
            </div>
          </div>
        </li>
        <li class="evaluation-item">
            <div class="evaluation-item-hd">
                <div class="evaluation-item-user">
                    <span class="evaluation-item-user__pic"><img src="https://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83epaF7uXUAxt9kMIsJ2l8hER3CCr19ZaEnsWq8QdvLGk8Po5Zzrfw5Gy1ibxjlVnwCbhGzUqbkj610A/132"></span>
                    <strong class="evaluation-item-user__name">韩*冰</strong>
                </div>
                <div class="evaluation-item-star">
                    <span class="evaluation-item-star-box star5"></span>
                </div>
            </div>
        </li>
      </ul>
      <h1 ref="anli">推荐商品</h1>
      <div class="title">
        <p class="title-name">缪斯女神</p>
        <div class="title-li">
          <span class="title-point">[女神专属 美艳缪斯]</span>
          <span class="title-desc">卡罗拉红玫瑰16枝，红豆5枝，粉色桔梗1枝，银叶菊2枝</span>
        </div>
      </div>
      <div class="huayu-item">
        <span class="huayu-label">花语</span>
        <p class="huayu-content">世间女子有各种类型：有些温婉如诗，有些独立若兰，有些奔放不羁……你是独一无二的落入凡间的美艳缪斯。</p>
      </div>
      <div class="evaluation-item-bd">
          <div class="evaluation-item-imglist">
            <a href="/productpj/PictureDetail?vorId=282753&amp;init=1">
              <img data-original="//img.hua.com/reviewpic/app/2018/12/29/a96458806fc4453fbbf939836538d120.jpeg" src="//img.hua.com/reviewpic/app/2018/12/29/a96458806fc4453fbbf939836538d120.jpeg">
            </a>
          </div>
      </div>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="$store.getters.num" @click="$router.push('/cart')" />
      <van-goods-action-icon icon="star-o" text="收藏" color="#ff5000" />
      <van-goods-action-button type="warning" text="加入购物车" @click="onAddCart" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import { getDetail, addCart, getCart } from '@/api/request.js'
import Vue from 'vue'
import { NavBar, Icon, Swipe, SwipeItem, Image as VanImage, ImagePreview, GoodsAction, GoodsActionIcon, GoodsActionButton, Popover, Toast, Tabbar, TabbarItem } from 'vant'
import { mapMutations } from 'vuex'

Vue.use(NavBar)
Vue.use(Icon)
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(VanImage)
Vue.use(ImagePreview)
Vue.use(GoodsAction)
Vue.use(GoodsActionIcon)
Vue.use(GoodsActionButton)
Vue.use(Popover)
Vue.use(Toast)
Vue.use(Tabbar)
Vue.use(TabbarItem)

export default {
  props: ['id'],
  data () {
    return {
      imgList: [],
      index: 0,
      data: {},
      showPopover: false,
      actions: [{ text: '首页', path: '/home' }, { text: '分类', path: '/kind' }, { text: '购物车' }, { text: '我的' }, { text: '搜索' }, { text: '分享' }],
      active: 0
    }
  },
  mounted () {
    this.updateCartList()
    getDetail({
      id: this.$route.params.id
    }).then(data => {
      this.imgList.unshift(data.data.msg.img)
      this.data = data.data.msg
    })
  },
  methods: {
    ...mapMutations({
      change_cartList: 'cart/change_cartList'
    }),
    onScroll () {
      const t = this.$refs.detailBox.scrollTop
      document.querySelector('.detail-nav-bar2').style.opacity = t / 100
      if (t >= this.$refs.tip.offsetTop - 46 && t < this.$refs.anli.offsetTop - 46) {
        this.active = 1
      } else if (t >= this.$refs.anli.offsetTop - 46) {
        this.active = 2
      } else {
        this.active = 0
      }
    },
    onImgPreView () {
      // 点击轮播图时,通过数据拿到当前索引,根据当前索引创建图片预览,设置默认图片
      const that = this
      ImagePreview({
        images: this.imgList,
        startPosition: this.index,
        onChange (i) {
          // 当图片预览切换时,根据切换后的索引,设置轮播图的位置
          that.$refs.mySwipe.swipeTo(i)
        }
      })
    },
    onChange (index) {
      // 在轮播图切换时,将索引保存到数据中
      this.index = index
    },
    onClickLeft () {
      this.$router.back()
    },
    onSelect (v) {
      // console.log(v.path)
      this.$router.push(v.path)
    },
    onAddCart () {
      addCart({
        userId: sessionStorage.getItem('userId'),
        proId: this.id,
        num: 1
      }).then(data => {
        if (data.data.code !== 202) {
          Toast('添加购物车成功')
          // 获取购物车数据，更新状态管理器中的购物车数据
          this.updateCartList()
        } else {
          Toast('添加购物车失败')
        }
      })
    },
    updateCartList () {
      getCart({
        userId: sessionStorage.getItem('userId')
      }).then(data => {
        this.change_cartList(data.data.msg.proData)
      })
    },
    onChangeFloor (v) {
      switch (v) {
        case 0:
          this.$refs.detailBox.scrollTop = 0
          break
        case 1:
          this.$refs.detailBox.scrollTop = this.$refs.tip.offsetTop - 46
          break
        case 2:
          this.$refs.detailBox.scrollTop = this.$refs.anli.offsetTop - 46
          break
      }
      this.active = v
    }
  }
}
</script>

<style lang="scss">
.detailBox{
  overflow: auto;
}
.detail-nav-bar1, .detail-nav-bar2{
  width: 100vw;
  position: fixed;
  &::after{
    border-bottom: none;
  }
  .van-nav-bar__left, .van-nav-bar__right{
    border-radius: 50%;
    background: #222;
    padding: 0;
    width: 0.4rem;
    height: 0.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: static;
    i{
      color: #fff;
    }
  }
  .van-nav-bar__title{
    width: 80%;
    .van-tabbar{
      position: static;
      width: 100%;
      height: 46px;
    }
  }
}
.detail-nav-bar1{
  background: none;
}
.detail-nav-bar2{
  background: #fff;
  opacity: 0;
  .van-nav-bar__left, .van-nav-bar__right{
    background: none;
    i{
      color: #000;
    }
  }
}
</style>
